<template>
	<view class="main-container">
		<view class="balance-card">
			<view class="balance-header">
				<text class="balance-label">当前余额</text>
				<text class="balance-amount">¥{{ formatBalance(userData.balance) }}</text>
			</view>
			<view class="balance-footer">
				<text class="balance-tip">可用于购买商品、支付订单等</text>
			</view>
		</view>

		<view class="recharge-section">
			<view class="section-title">充值金额</view>
			<view class="amount-grid">
				<view 
					class="amount-item" 
					v-for="(amount, index) in presetAmounts" 
					:key="index"
					:class="{ active: selectedAmount === amount }"
					@tap="selectAmount(amount)"
				>
					<text class="amount-value">¥{{ amount }}</text>
				</view>
				<view class="amount-item custom" :class="{ active: isCustomAmount }">
					<input 
						type="digit" 
						v-model="customAmount" 
						placeholder="其他金额" 
						@input="handleCustomInput"
						@focus="handleCustomFocus"
					/>
				</view>
			</view>
		</view>

		<button class="recharge-btn" @tap="recharge" :disabled="!canRecharge">
			{{ rechargeButtonText }}
		</button>
	</view>
</template>

<script>
import { ref, computed, onMounted } from 'vue'

export default {
	setup() {
		const userData = ref({
			balance: '0.00'
		})
		const presetAmounts = ref([50, 100, 200, 500, 1000, 2000])
		const selectedAmount = ref(null)
		const customAmount = ref('')
		const isCustomAmount = ref(false)
		const canRecharge = ref(true)
		const rechargeButtonText = ref('立即充值')

		// 格式化余额显示
		const formatBalance = (balance) => {
			const num = parseFloat(balance)
			return isNaN(num) ? '0.00' : num.toFixed(2)
		}

		// 选择充值金额
		const selectAmount = (amount) => {
			selectedAmount.value = amount
			isCustomAmount.value = false
			customAmount.value = ''
		}

		// 处理自定义金额输入
		const handleCustomInput = (e) => {
			customAmount.value = e.detail.value
			selectedAmount.value = null
		}

		// 处理自定义金额输入框获得焦点
		const handleCustomFocus = () => {
			isCustomAmount.value = true
			selectedAmount.value = null
		}

		// 充值
		const recharge = () => {
			if (!canRecharge.value) return

			// 获取充值金额
			let amount = 0
			if (isCustomAmount.value) {
				amount = parseFloat(customAmount.value)
				if (isNaN(amount) || amount <= 0) {
					uni.showToast({
						title: '请输入有效的充值金额',
						icon: 'none'
					})
					return
				}
			} else {
				amount = selectedAmount.value
				if (!amount) {
					uni.showToast({
						title: '请选择充值金额',
						icon: 'none'
					})
					return
				}
			}

			// 更新按钮状态
			canRecharge.value = false
			rechargeButtonText.value = '充值中...'

			// 模拟充值过程
			setTimeout(() => {
				const storedUserInfo = uni.getStorageSync('userInfo')
				if (!storedUserInfo) return
				
				const userList = uni.getStorageSync('userList') || []
				const userIndex = userList.findIndex(item => item.uid === JSON.parse(storedUserInfo).uid)
				
				if (userIndex > -1) {
					// 更新余额
					const currentBalance = parseFloat(userList[userIndex].balance || 0)
					const newBalance = currentBalance + amount
					userList[userIndex].balance = newBalance.toFixed(2)
					uni.setStorageSync('userList', userList)
					
					// 更新显示
					userData.value.balance = formatBalance(newBalance)
					
					uni.showToast({
						title: '充值成功',
						icon: 'success'
					})
				}
				
				// 恢复按钮状态
				canRecharge.value = true
				rechargeButtonText.value = '立即充值'
			}, 1500)
		}

		// 加载用户信息
		const loadUserInfo = () => {
			const storedUserInfo = uni.getStorageSync('userInfo')
			if (!storedUserInfo) return
			
			const userList = uni.getStorageSync('userList') || []
			const currentUser = userList.find(item => item.uid === JSON.parse(storedUserInfo).uid)
			if (currentUser) {
				userData.value = {
					balance: formatBalance(currentUser.balance)
				}
			}
		}

		onMounted(() => {
			loadUserInfo()
		})

		return {
			userData,
			presetAmounts,
			selectedAmount,
			customAmount,
			isCustomAmount,
			canRecharge,
			rechargeButtonText,
			formatBalance,
			selectAmount,
			handleCustomInput,
			handleCustomFocus,
			recharge
		}
	},
	// 使用选项式API定义页面生命周期
	onShow() {
		// 每次页面显示时重新加载用户信息
		const storedUserInfo = uni.getStorageSync('userInfo')
		if (!storedUserInfo) return
		
		const userList = uni.getStorageSync('userList') || []
		const currentUser = userList.find(item => item.uid === JSON.parse(storedUserInfo).uid)
		if (currentUser) {
			this.userData = {
				balance: this.formatBalance(currentUser.balance)
			}
		}
	}
}
</script>

<style scoped>
.main-container {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding: 20rpx;
}

.balance-card {
	background: linear-gradient(135deg, #007AFF, #00BFFF);
	border-radius: 20rpx;
	padding: 40rpx;
	margin-bottom: 30rpx;
	color: #fff;
	box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
}

.balance-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 20rpx;
}

.balance-label {
	font-size: 32rpx;
	opacity: 0.9;
	margin-bottom: 10rpx;
}

.balance-amount {
	font-size: 80rpx;
	font-weight: bold;
}

.balance-footer {
	text-align: center;
}

.balance-tip {
	font-size: 24rpx;
	opacity: 0.8;
}

.recharge-section {
	background-color: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
}

.section-title {
	font-size: 32rpx;
	font-weight: bold;
	color: #333;
	margin-bottom: 30rpx;
}

.amount-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20rpx;
}

.amount-item {
	height: 100rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #f8f8f8;
	border-radius: 12rpx;
	transition: all 0.3s;
}

.amount-item.active {
	background-color: #e6f3ff;
	border: 2rpx solid #007AFF;
}

.amount-value {
	font-size: 32rpx;
	color: #333;
}

.amount-item.custom input {
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 32rpx;
	color: #333;
	background: transparent;
}

.recharge-btn {
	width: 100%;
	height: 88rpx;
	line-height: 88rpx;
	text-align: center;
	background: linear-gradient(135deg, #007AFF, #00BFFF);
	color: #fff;
	border-radius: 44rpx;
	font-size: 32rpx;
	font-weight: bold;
	box-shadow: 0 4rpx 12rpx rgba(0, 122, 255, 0.2);
	transition: all 0.3s;
}

.recharge-btn:active {
	transform: scale(0.98);
	opacity: 0.9;
}

.recharge-btn[disabled] {
	background: #ccc;
	box-shadow: none;
}
</style>